<template>
  <!-- 	<view class="page-login">
		<view class="tab">
			<view class="item active">
				登录
			</view>
			<view class="item" @tap="toRegister">
				注册
			</view>
		</view>
		<view class="con"> -->
  <!-- 账号登录 -->
  <!-- 	<view v-if="isAccountLogin" class="item-box">
				<view class="item">
					<input v-model="principal" type="text" class="text" placeholder="请输入用户名/手机号">
				</view>
				<view v-if="errorTips == 1" class="error">
					<text class="error-icon">
						!
					</text>账号为4~16位字母、数字或下划线组成的用户名 / 11位手机号
				</view>
				<view class="item">
					<input v-model="credentials" type="password" class="text" placeholder="请输入账户密码">
				</view>
				<view v-if="errorTips == 2" class="error">
					<text class="error-icon">
						!
					</text>请输入密码
				</view>
			</view> -->
  <!-- 验证码登录 -->
  <!-- 		<view v-if="!isAccountLogin" class="item-box">
				<view class="item">
					<input v-model="principal" type="text" class="text" placeholder="请输入手机号">
				</view>
				<view v-if="errorTips == 3" class="error">
					<text class="error-icon">
						!
					</text>请输入手机号
				</view>
				<view v-if="errorTips == 4" class="error">
					<text class="error-icon">
						!
					</text>请输入正确的手机号
				</view>
				<view class="item">
					<input v-model="captchaVerification" type="text" class="text" placeholder="请输入验证码">
					<view class="get-captcha">
						获取验证码
					</view>
				</view>
				<view v-if="errorTips == 5" class="error">
					<text class="error-icon">
						!
					</text>请输入验证码
				</view>
			</view>
			<view class="btn" @click="login">
				登录
			</view>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权手机号码登录
			</button>
		</view>
	</view> -->
  <view class='main'>
    <image :src="addDomain('/static/loginbg.jpg')" mode="aspectFill"></image>
    <button class="btn" v-if="haveChecked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录/注册</button>
    <button class="btn" v-else @tap="noChecked">一键登录/注册
    </button>
    <view class="tips">
      <checkbox-group @change="checkboxChange">
        <checkbox :checked="haveChecked"></checkbox>
      </checkbox-group>
      登录即同意
      <view class="link" @tap="gotoUserAgreement">《用户协议》</view>
      和
      <view class="link" @tap="gotoUserAgreement">《隐私政策》</view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'

  const Data = reactive({
    isAccountLogin: true, // 账号登录
    captchaVerification: '', // 验证码
    credentials: '', // 密码
    principal: '', // 用户名/邮箱/手机号
    sysType: 0, // 系统类型 0.普通用户系统 1.商家端
    errorTips: 0, // 输入错误提示: 0无  1账号有误或为空 2密码输入错误或为空 3手机号为空 4手机号输入错误 5验证码输入错误
    fileUrl: import.meta.env.VITE_APP_FILE_URL,

  })
  const {
    isAccountLogin,
    captchaVerification,
    credentials,
    principal,
    errorTips,
    fileUrl
  } = toRefs(Data)
  const haveChecked = ref(false)
  const checkboxChange = () => {
    haveChecked.value = !haveChecked.value
  }
  const gotoUserAgreement = () => {
    uni.navigateTo({
      url: '/pages/user_agreement/user_agreement'
    })
  }
  // 登录
  const login = () => {
    if (Data.isAccountLogin && (!Data.principal || !util.checkUserName(Data.principal))) {
      Data.errorTips = 1
      return
    }
    if (Data.isAccountLogin && !Data.credentials) {
      Data.errorTips = 2
      return
    }
    if (!Data.isAccountLogin && !Data.principal) {
      Data.errorTips = 3
      return
    }
    if (!Data.isAccountLogin && !util.checkPhoneNumber(Data.principal)) {
      Data.errorTips = 4
      return
    }
    if (!Data.isAccountLogin && !Data.captchaVerification) {
      Data.errorTips = 5
      return
    }
    Data.errorTips = 0
    const params = {
      url: '/mall4cloud_auth/ua/login',
      method: 'POST',
      data: {
        principal: Data.principal,
        credentials: Data.credentials,
        captchaVerification: Data.captchaVerification,
        sysType: Data.sysType
      }
    }
    http.request(params).then((res) => {
      uni.setStorageSync('cloudToken', res.accessToken)
      uni.setStorageSync('cloudLoginResult', res) // 保存整个登录数据
      uni.navigateBack()
    })
  }

  function getPhoneNumber(res) {
    // 获得的手机code
    uni.showToast({
      title: '正在登录中···',
      icon: 'none'
    })
    if (res.detail.code) {
      const params = {
        url: '/mall4cloud_auth/ua/wxLogin?code=' + res.detail.code,
        method: 'GET',
      }
      http.request(params).then((res) => {
        uni.setStorageSync('cloudToken', res.accessToken)
        uni.setStorageSync('cloudLoginResult', res) // 保存整个登录数据
        uni.hideToast()
        uni.navigateBack()
      })
    } else {
      //获取手机号失败
      uni.showToast({
        title: '获取手机号失败',
        icon: 'error',
        mask: true,
        duration: 2000
      });
    }

  }
  // 去注册
  const toRegister = () => {
    uni.redirectTo({
      url: '/pages/register/register'
    })
  }
  // 没有勾选执行的操作
  const noChecked = () => {

    if (!haveChecked.value) {
      uni.showToast({
        title: '请勾选用户协议！',
        icon: 'none',
        duration: 2000
      });
      return
    }
  }
  // 添加图片域名
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }
</script>

<style lang="scss" scoped>
  @use "login";
</style>
